<script>
import { defineComponent, reactive, ref } from 'vue'
import { authUserList, authRoleList, authUserRoleAdd } from '@Config/server/api'
import MakeForm, { MakeFormState } from '@Components/makeForm'
import { maxSearchValue } from '@Untils'
import * as Antd from 'ant-design-vue'
import DataTable from '@Components/dataTable'
import { message } from 'ant-design-vue'
import { Messages } from '@Config/config'

export default defineComponent({
  components: {
    DataTable,
    MakeForm,
  },
  emits: ['add', 'close'],
  setup(props, context) {
    let role_list = reactive({ data: [] })
    authRoleList({ size: 100000, index: 1 }).then((_role_list) => {
      role_list.data = _role_list.data.records.map((x) => {
        x.value = x.id
        x.label = x.roleName
        return x
      })
    })

    let form_config = [
      {
        key: 'userName',
        initValue: null,
        uiType: 'input',
        col: { span: 12 },
        attr: {
          allowClear: true,
          ...maxSearchValue(),
          placeholder: '登录名称',
        },
        formItem: { label: '登录名称' },
      },
      {
        key: 'nickname',
        initValue: null,
        uiType: 'input',
        col: { span: 12 },
        attr: {
          allowClear: true,
          ...maxSearchValue(),
          placeholder: '昵称',
        },
        formItem: { label: '昵称' },
      },
      {
        key: 'sex',
        initValue: 0,
        uiType: 'radio',
        col: { span: 24 },
        source: [
          {
            label: '未知',
            value: 0,
          },
          {
            label: '男',
            value: 1,
          },
          {
            label: '女',
            value: 2,
          },
        ],
        attr: { allowClear: true },
        formItem: { label: '性别' },
      },
    ]

    let loading = reactive({
      search_loading: false,
      loading: false,
    })
    let form_state = reactive({ data: MakeFormState(form_config) })

    let tableData = reactive({
      data: {
        source: [],
        columns: [
          {
            key: 'nickname',
            dataIndex: 'nickname',
            title: '姓名',
            width: '50%',
          },
          {
            key: 'userName',
            dataIndex: 'userName',
            title: '登录名称',
            width: '50%',
          },
          // {
          //   key: 'operation',
          //   dataIndex: 'operation',
          //   width: '60%',
          //   title: '所属角色',
          // },
        ],
      },
    })
    let custom = [
      // {
      //   key: 'operation',
      //   bodyFn: (text, record, index) => {
      //     return (
      //       <Antd.Row gutter={[10, 10]}>
      //         <Antd.Col span={24}>
      //           <Antd.Button
      //             type="primary"
      //             onClick={async () => {
      //               let _result = await authUserRoleAdd({
      //                 userId: record.userId,
      //                 roleId: record.belongRoleId,
      //               })
      //               if (_result.code == 0) {
      //                 Messages.add(message.success('操作成功'))
      //               } else {
      //                 Messages.add(message.error(`操作失败[${_result.msg}]`))
      //               }
      //             }}
      //           >
      //             确定
      //           </Antd.Button>
      //         </Antd.Col>
      //       </Antd.Row>
      //     )
      //   },
      // },
    ]
    let searchData = async () => {
      loading.search_loading = true
      let _result = await authUserList({ ...form_state.data })
      loading.search_loading = false

      if (_result.code != 0) {
        return
      }
      tableData.data.source = _result.data
    }

    let resetHandler = () => {
      form_ref.value.resetState()
    }
    let form_ref = ref()
    let local_form = reactive({
      belongRoleId: null,
    })
    let selectedRowKeys = reactive({ data: [] })

    let submitHandler = () => {
      local_form_ref.value.validate().then(async () => {
        loading.loading = true
        context.emit('add', {
          params: {
            userIdList: selectedRowKeys.data,
            roleId: local_form.belongRoleId,
          },
          innerCallBack: (_result) => {
            loading.loading = false

            if (_result.code == 0) {
              context.emit('close')
            }
          },
        })
        // let _result = await authUserRoleAdd({
        //   userIdList: selectedRowKeys.data,
        //   roleId: local_form.belongRoleId,
        // })
        // if (_result.code == 0) {
        //   Messages.add(message.success('操作成功'))

        // } else {
        //   Messages.add(message.error(`操作失败[${_result.msg}]`))
        // }
      })
    }

    let cancelHandler = () => {
      context.emit('close')
    }

    let local_form_ref = ref()
    return {
      submitHandler,
      form_config,
      form_state,
      tableData,
      loading,
      custom,
      searchData,
      resetHandler,
      form_ref,
      selectedRowKeys,
      role_list,
      cancelHandler,
      local_form,
      local_form_ref,
    }
  },
  render() {
    return (
      <Antd.Row gutter={[20, 20]}>
        <Antd.Col span={24}>
          <MakeForm
            ref="form_ref"
            class="search_form"
            formConfig={this.form_config}
            value={this.form_state.data}
            enterCallBack={() => {
              this.searchData()
            }}
          />
        </Antd.Col>

        <Antd.Col span={24}>
          <Antd.Space>
            <Antd.Button
              type="primary"
              onClick={this.searchData}
              loading={this.loading.search_loading}
            >
              搜索
            </Antd.Button>
            <Antd.Button
              type="primary"
              danger
              loading={this.loading.search_loading}
              onClick={this.resetHandler}
            >
              重置
            </Antd.Button>
          </Antd.Space>
        </Antd.Col>

        <Antd.Col span={24}>
          <Antd.Divider>列表用户设置权限</Antd.Divider>
        </Antd.Col>
        <Antd.Col span={24}>
          <Antd.Form model={this.local_form} ref="local_form_ref">
            <Antd.FormItem
              label="所属角色"
              name="belongRoleId"
              rules={[
                {
                  required: true,
                  message: '请选择添加的角色',
                },
              ]}
            >
              <Antd.Select
                style={{ width: '100%' }}
                options={this.role_list.data}
                placeholder="请选择表中用户所属角色"
                onChange={(e) => {
                  this.local_form.belongRoleId = e
                }}
              ></Antd.Select>
            </Antd.FormItem>
          </Antd.Form>
          <DataTable
            data={this.tableData}
            disabledSelectedKeys={false}
            selectedRowKeys={this.selectedRowKeys}
            uiAttr={{
              rowKey: 'userId',
              scroll: { x: null },
              tableLayout: 'fixed',
              bordered: true,
            }}
            custom={this.custom}
            loading={this.loading}
          />
        </Antd.Col>

        <Antd.Col span={24}>
          <Antd.Space>
            <Antd.Button
              type="primary"
              loading={this.loading.loading}
              onClick={() => {
                this.submitHandler()
              }}
              disabled={this.selectedRowKeys.data.length <= 0}
            >
              确定
            </Antd.Button>
            <Antd.Button
              type="primary"
              danger
              onClick={this.cancelHandler}
              loading={this.loading.loading}
            >
              取消
            </Antd.Button>
          </Antd.Space>
        </Antd.Col>
      </Antd.Row>
    )
  },
})
</script>
